<template>
  <div class="app-body">
    <el-container>
      <el-header>
        <el-row class="app-header" type="flex" justify="space-between">
          <div class="logo">
            <img src="../../assets/images/logo.png">
            <h3>疫情问卷中心</h3>
          </div>
          <div>
            <el-dropdown>
              <span style="cursor: pointer">
                您好，<span v-text="user.name"></span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="doLogout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="240px">
          <el-menu :router="true">
            <el-menu-item index="/admin">
              <i class="el-icon-menu"></i>
              <span slot="title">图表</span>
            </el-menu-item>
            <el-menu-item index="/admin/que">
              <i class="el-icon-document"></i>
              <span slot="title">数据报表</span>
            </el-menu-item>
            <el-menu-item index="/admin/person">
              <i class="el-icon-user"></i>
              <span slot="title">人员信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="body">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        user: {}
      }
    },
    methods: {
      doLogout() {
        this.$utils.clearToken()
        this.$router.replace('/login')
      }
    },
    created() {
      this.$axios.get('/user').then(rs => {
        this.user = rs.data.payload
      }).catch(err => {
        console.log(err, 'err ====')
      })
    }
  }
</script>

<style>
  .app-body .el-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 1000;
  }
  .app-body .el-aside {
    background-color: #fff;
    height: calc(100vh - 60px);
  }
  .app-body .el-main {
    padding: 0;
    margin: 15px 14px;
    background-color: #fff;
  }

  .app-body .logo {
    display: flex;
    align-content: center;
  }
  .app-body .logo img {
    margin-top: 10px;
    margin-right: 5px;
    width: 40px;
    height: 40px;
  }

  .app-header {
    height: inherit;
    line-height: 60px;
  }

  .app-body .el-menu {
    border-right: none;
  }
</style>